﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
    

<div class="modal-dialog demo2do-modal-dialog" style="width: 1000px">

  <div class="modal-content">

    <div class="modal-header beast-breadcrumb no-bottom-border clearfix">

      <h2><i class="glyphicon glyphicon-fire" title=""></i>&nbsp;&nbsp;<span>用户列表&nbsp;-&nbsp;添加用户</span></h2>

      <button type="button" class="close" data-dismiss="modal">&times;</button>

    </div>

    <form class="form-horizontal" method="POST" action="${ctx.host}/customers" data-validate="true">

      <div class="modal-body">

        <div class="form-group demo2do-form-group">

		  <label class="col-xs-2 control-label">手机号码</label>
          <div class="pull-left" style="width: 30%">
            <input type="text" class="form-control" name="mobile" data-validate="required|mobile"/>
          </div>
          
        </div>
 
        <div class="form-group demo2do-form-group">
        
          <label class="col-xs-2 control-label">联系人</label>
          <div class="pull-left" style="width: 30%">
            <input type="text" class="form-control" name="profile.nickName" data-validate="required"/>
          </div>
          
          <label class="col-xs-2 control-label">城市</label>
          <div class="pull-left" style="width: 30%">
            <select class="form-control" name="profile.city" data-validate="required">
              <option></option>
              <c:forEach var="city" items="${persist.cities}">
                <option value="${city.value.code}" data-province="${city.value.belongs}">${city.value.name}</option>
              </c:forEach>
            </select>
            <input type="hidden" name="profile.province" >
          </div>
          
        </div>
        
        <div class="form-group demo2do-form-group">

          <label class="col-xs-2 control-label">年龄</label>
          <div class="pull-left" style="width: 30%">
            <input type="text" class="form-control" name="profile.age" data-validate="required|number"/>
          </div>

          <label class="col-xs-2 control-label">性别</label>
          <div class="pull-left" style="width: 30%">
            <select name="profile.sex" class="form-control" data-live-search="true" data-size="5" data-validate="required">
                <option value=""></option>
                <c:forEach var="sex" items="${enums['sex']}">
                  <option value="${sex.name}">${sex.description}</option>
                </c:forEach>
            </select>
          </div>
        </div>
        
        <div class="form-group demo2do-form-group">

          <label class="col-xs-2 control-label">生活标签</label>
          <div class="pull-left" style="width: 50%">
            <select multiple class="form-control" name="lifeTagCodes" >
              <c:forEach var="lifeTag" items="${persist.lifeTags}">
                <option value="${lifeTag.value.code}">${lifeTag.value.name}</option>
              </c:forEach>
            </select>
          </div>
				</div>
				
				<div class="form-group demo2do-form-group">
          <label class="col-xs-2 control-label">兴趣标签</label>
          <div class="pull-left" style="width: 50%">
            <select multiple class="form-control" name="interestTagCodes" >
              <c:forEach var="interestTag" items="${persist.interestTags}">
                <option value="${interestTag.value.code}" >${interestTag.value.name}</option>
              </c:forEach>
            </select>
          </div>
        </div>
       
      </div>

      <div class="modal-footer">
        <button type="submit" class="btn btn-success btn-shadow btn-shadow-success demo2do-btn">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-default btn-shadow btn-shadow-default demo2do-btn" data-dismiss="modal">取消</button>
      </div>

    </form>

  </div>
  
</div>

<script src="${ctx.resource}/js/bootstrap.validate.trigger.js"></script>
<script src="${ctx.resource}/js/plupload.full.min.js"></script>
<script src="${ctx.resource}/js/qiniu.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('select[name="profile.sex"]').select2({
            placeholder: '选择性别',
            minimumResultsForSearch: -1,
            allowClear: true
        });

        $('select[name="profile.city"]').select2({
            placeholder: '选择城市',
            minimumResultsForSearch: -1,
            allowClear: true
        });
        
        $('select[name="profile.city"]').on('change', function(event){
        	$('input[name="profile.province"]').val($(this).find('option:selected').data('province'));
        });
        
        $('select[name="interestTagCodes"]').select2({
            placeholder: '选择兴趣标签',
            minimumResultsForSearch: 1,
            allowClear: true
        });

        $('select[name="lifeTagCodes"]').select2({
            placeholder: '选择生活标签',
            minimumResultsForSearch: 1,
            allowClear: true
        });

        $('form').shiftform({
            beforeSubmit:function(el){
              $('form').trigger("validate.ajax.submit");
              return $.bt_validate.result[$.bt_validate.form_id]    
            }
           });
    })
</script>